import React, {Component} from 'react';
import styles from './Greeter.css';
import Slideimg from './Slideimg'
import Tab from './Tab'
import Address from './address.js'
class Product extends Component{
	  constructor(props) {

      super(props);
        this.state = {
          img:"../img/productimg.jpg",
          num:1,
          bColor1: 'white',
          bColor2: 'white',
          bColor3: 'white',
          bColor4: 'white',
          bColor5: 'white',
      };
  }
      handleClick1(){
        this.setState({img:"../img/pb.jpg"});
    }
      handleClick2(){
        this.setState({img:"../img/pc.jpg"});
    }
      handleClick3(){
        this.setState({img:"../img/productimg.jpg"});
    }

     handleClick5(){
     	this.setState({num: this.state.num + 1});
     }
     handleClick6()
     {
     	this.setState({num:this.state.num-1});
     }
     handleClick7()
     {
 this.setState({bColor: this.state.bColor1 = 'red'});
 this.setState({bColor: this.state.bColor2 ='white' });
 this.setState({bColor: this.state.bColor3 ='white' });
 this.setState({bColor: this.state.bColor4 ='white' });
     }
      handleClick8()
     {
 this.setState({bColor: this.state.bColor1 = 'white'});
 this.setState({bColor: this.state.bColor2 ='red' });
 this.setState({bColor: this.state.bColor3 ='white' });
 this.setState({bColor: this.state.bColor4 ='white' });
     }
     handleClick9()
     {
 this.setState({bColor: this.state.bColor1 = 'white'});
 this.setState({bColor: this.state.bColor2 ='white' });
 this.setState({bColor: this.state.bColor3 ='red' });
 this.setState({bColor: this.state.bColor4 ='white' });
     }
    handleClick10()
     {
 this.setState({bColor: this.state.bColor1 = 'white'});
 this.setState({bColor: this.state.bColor2 ='white' });
 this.setState({bColor: this.state.bColor3 ='white' });
 this.setState({bColor: this.state.bColor4 ='red' });
     }
     handleClick11()
     {
      this.setState({bColor:this.state.bColor5 ='red'});
     }
  render() {
    return (
    	<div style={{position:'relative',width:'100%',top:'100px',margin:"0 auto"}}>
       <div className={styles.imgcontainer} >
       <div className={styles.box} className='box'>
           <img src={this.state.img} style={{width:'400px',height:'300px'}} />
       </div>
       </div>
       <div className={styles.imgzoom}>
          <div className={styles.Smallimg} onMouseOver={()=>this.handleClick3()}>
               <img src={require('../img/productimg.jpg')} style={{width:'80px',height:'70px',}} />
          </div>
          <div className={styles.Smallimg} onMouseOver={()=>this.handleClick1()}>
               <img src={require('../img/pb.jpg')} style={{width:'80px',height:'70px',}} />
          </div>
          <div className={styles.Smallimg} onMouseOver={()=>this.handleClick2()}>
               <img src={require('../img/pc.jpg')} style={{width:'80px',height:'70px',}} />
          </div>
       </div>
       <div>
       <div className={styles.productName}>
       ALLIN羽绒服外套
       </div>
       <div className={styles.introduction}>
        <div style={{fontSize:'15px'}}>价格：600元</div>
        <div style={{fontSize:'30px',marginTop:'10px'}}>促销价：388元</div>
       </div>
       <div style={{position:'absolute',left:'45%',top:'180px',padding:'20px 20px 15px 0px',borderBottom:'1px solid black',}}>
       广东广州至
       <div><Address /></div>
       </div>

       <div style={{position:'absolute',top:'280px',left:'45%'}}>尺码:
       <input className={styles.SizeSelect} type="button"  value="s" onClick={()=>this.handleClick7()} style={{backgroundColor: this.state.bColor1}}></input>
       <input  type="button" className={styles.SizeSelect} value="M" checked="" onClick={()=>this.handleClick8()} style={{backgroundColor: this.state.bColor2}}></input>
       <input type="button" className={styles.SizeSelect} value="L" checked="" onClick={()=>this.handleClick9()} style={{backgroundColor: this.state.bColor3}}></input>
       <input type="button" className={styles.SizeSelect} value="XL" checked="" onClick={()=>this.handleClick10()} style={{backgroundColor: this.state.bColor4}}></input>
       </div>
       <div style={{position:'absolute',top:'340px',left:'45%'}}>颜色:
       <input type="button" className={styles.colorSelect} value="红色" onClick={()=>this.handleClick11()} style={{backgroundColor: this.state.bColor5}}></input>

       </div>
        <div style={{position:'absolute',top:'390px',left:'45%'}}>数量:{this.state.num}
       <button style={{border:'1px solid black',width:'20px',height:'20px',marginLeft:'10px'}} onClick={()=>this.handleClick5()}>+</button>
       <button disabled={this.state.num==1?"disabled":""} style={{border:'1px solid black',width:'20px',height:'20px',marginLeft:'10px'}} onClick={()=>this.handleClick6()}>-</button>
       </div>
       <button style={{width:'100px',height:'40px',border:'1px solid black',backgroundColor:'#eee',position:'absolute',top:'440px',left:'45%'}}>立即购买</button>
       <button style={{width:'100px',height:'40px',border:'1px solid black',backgroundColor:'#eee',position:'absolute',top:'440px',left:'55%'}}>加入购物车</button>
       <div className={styles.slideimg}>
       <Slideimg />
       </div>
    	</div>
    	</div>
    	)
}
}
export default Product